<template>
	<view class="home">
		<!-- 轮播 -->
		<swiper circular indicator-dots  autoplay>
			<swiper-item v-for="item in swipers" :key="item.id">
				<image :src="item.img"></image>
				</swiper-item>
		</swiper>
		<!-- 导航 -->
		<view class=" nav">
			<view class="nav_item" v-for="(item,index) in navs":key="index" @click="navItemClick(item.path)">
				<view :class="item.icon"></view>
				<text >{{item.title}}</text>
			</view>
			
		</view>
		
		<!-- 推荐商品 -->
		<view class="hot_goods">
			 <view class="tit">推荐商品</view>
			 <!-- 封装组件 -->
			<good-lits @goodsItemClick="goGoodsDetail" :goods="goods"></good-lits>
		
		</view>
	</view>
</template>

<script>
	import goodsList from '../../components/goods_list.vue'
export default {
	data() {
		return {
			swipers: [],
			goods:[],
			navs:[
				{
				icon:'iconfont icon-ziyuan',
				title:'许根银的超市',
				path:'/pages/goods/goods'
			},
			{
				icon:'iconfont icon-guanyuwomen',
				title:'联系我们',
				path:'/pages/contact/contact'
			},
			{
				icon:'iconfont icon-tupian',
				title:'社区图片',
				path:'/pages/pics/pics'
			},
			{
				icon:'iconfont icon-shipin',
				title:'学习视频',
				path:'/pages/videos/videos'
			}
			
			]
		};
	},
	onLoad() {
		this.getSwipers();
		this.getHotGoods();
	},
	components:{"good-lits":goodsList},
	methods: {
		/**
		 * async await 最常见的是在云函数内的使用
		await 只能用于 async 函数内部
		await 使用的精髓在于，紧随 await 之后的函数或是其他类型，产生的结果，
		一旦被调用，就会立即计算出结果，供调用者使用
		
		async await 在 methods 内使用
		在一个方法的内部使用 async await
		这个方法在等待另一个方法的结果
		 */
		async getSwipers() {
			const res = await this.$myRuquest({
				url: '/api/getlunbo'
			});
			this.swipers = res.data.message
			
		},
		// 获取人商品列表数据
		async getHotGoods(){
		
			const res= await this.$myRuquest({ 
				 url:'/api/getgoods?pageindex=1'
		
			})
			this.goods =res.data.message
			console.log(this.goods);
		},
		navItemClick(url){
			uni.navigateTo({
				url
			})
		},
		// 导航到商品详细页
		goGoodsDetail(id){
			console.log("点击了")
			uni.navigateTo({
				url:'/pages/goods-detail/goods-detail?id='+id
			})
		}
		
	}

};
</script>

<style lang="scss"> 
	.home{
		swiper{
			width: 750rpx;//750rpx满屏
			height: 380rpx;
			image{
				height:100%;
				width: 100%;
			}
		}
		
	}
	.nav{
		display: flex;
		.nav_item{
			width: 25%;
			text-align: center;
			view{
				width: 120rpx;
				height: 120rpx;
				background: $shop-color;
				border-radius: 60rpx;
				margin: 10px auto;
				line-height: 120rpx;
				color: #fff;
			}
			text{
				font-size: 30rpx;
			}
			.icon-tupian{
				font-size: 45rpx;
			}
		}
	}
	.hot_goods{
		background:#eee;
		overflow: hidden; //超出的部分隐藏 不用影响子类
		margin-top: 10px;
		.tit{
			height: 50px;
			line-height: 50px;
			color: $shop-color;
			text-align: center;
			letter-spacing: 20px; //每个字的间距
			background: #fff;
			margin: 7rpx auto;	
		}
		
		
	}
	
</style>
